Change background color of window when window is resized

Question

Aryan Kumar · Answer

If you want to check the background color of the window when it's resized and do something based on that in jQuery, you can use the
$(window).resize() event. Here's an example:
andlt;!DOCTYPE html>
andlt;html lang="en">
andlt;head>
  andlt;meta charset="UTF-8">
  andlt;meta name="viewport" content="width=device-width, initial-scale=1.0">
  andlt;title>Check Background Color on Window Resizeandlt;/title>
  andlt;style>
    body {
      margin: 0;
      padding: 0;
      background-color: #ffffff; /* Set your default background color */
    }
  andlt;/style>
  andlt;script src="https://code.jquery.com/jquery-3.6.4.min.js">andlt;/script>
andlt;/head>
andlt;body>
andlt;script>
  $(document).ready(function () {
    // Initial check on document ready
    checkBackgroundColor();
    // Check on window resize
    $(window).resize(function () {
      checkBackgroundColor();
    });
    function checkBackgroundColor() {
      // Get the background color of the body element
      var bgColor = $('body').css('background-color');
      // Display the background color in the console (you can replace this with your logic)
      console.log('Background Color:', bgColor);
      // Example: Change something based on the background color
      if (bgColor === 'rgb(255, 255, 255)') {
        // Change something for white background
        console.log('White background detected.');
      } else {
        // Change something for non-white background
        console.log('Non-white background detected.');
      }
    }
  });
andlt;/script>
andlt;/body>
andlt;/html>
In this example:
The initial background color is set using CSS.The $(window).resize() event is used to trigger the 
checkBackgroundColor function whenever the window is resized.The checkBackgroundColor function gets the background color of the body and logs it to the console. You can replace the console.log statements with your desired logic based on the background color.
Remember to adjust the logic inside the checkBackgroundColor function according to your specific requirements.

forum

Change background color of window when window is resized

Ethan Karla

Can you answer this question?

1 Answers

Liked By